<template>
  <div class="yun-page">
    <div id='Ymap' class='yun-map'></div>
    <div class='yun-menu'>
      <div class='yun-menu-item' 
        v-for='item in mapFnList' :key='item.fnkey'
        @click='handleMapEvent(item.fnkey)'
      >{{item.label}}</div>
    </div>
    <div class="event" ref="eventInfo">
      <div class="event-title">
        <span>事件详情</span> <i class="yun-close" @click="closeOverlay">X</i>
      </div>
      <div class="event-content">王大妈家的鸡今天早上被王二狗偷吃了</div>
    </div>
  </div>
</template>

<script>
import Ymap from '@/Ymap/Ymap.js'
import YunCode from './yun-code.vue'
import axios from "axios";
export default {
  name: 'Home',
  components: {
    YunCode
  },
  data(){
    return {
      tk:'b9d4b98c977aee7408ab9c89def3aad7',
      map:null,
      overLayer:null,
      mapFnList:[
        {
          label:'初始化',
          fnkey:1
        },
        {
          label:'设置地图缩放',
          fnkey:2
        },
        {
          label:'设置地图中心',
          fnkey:3
        },
        {
          label:'地图跳转动画',
          fnkey:4
        },
        {
          label:'点',
          fnkey:5
        },
        {
          label:'线',
          fnkey:6
        },
        {
          label:'圆',
          fnkey:7
        },
        {
          label:'扇形',
          fnkey:8
        },
        {
          label:'多边形',
          fnkey:9
        },
        {
          label:'获取覆盖物',
          fnkey:20
        },
        {
          label:'清空覆盖物',
          fnkey:10
        },
        {
          label:'移除覆盖物',
          fnkey:11
        },
        {
          label:'画线',
          fnkey:12
        },
        {
          label:'画圆',
          fnkey:13
        },
        {
          label:'画矩形',
          fnkey:14
        },
        {
          label:'画多边形',
          fnkey:15
        },
        {
          label:'信息窗口',
          fnkey:16
        },
        {
          label:'点聚合',
          fnkey:17
        },
        {
          label:'热力图',
          fnkey:18
        },
        // {
        //   label:'风场',
        //   fnkey:19
        // },
        
      ],
      heatData: {
        type: "FeatureCollection",
        features: [
          { type: "Point", coordinates: [116.35466, 40.03749], count: 100 },
          { type: "Point", coordinates: [116.29295, 39.97404], count: 19 },
          { type: "Point", coordinates: [116.406635, 39.886795], count: 419 },
          { type: "Point", coordinates: [116.41682, 39.929312], count: 319 },
          { type: "Point", coordinates: [116.266682, 40.03056], count: 719 },
          { type: "Point", coordinates: [116.194211, 40.028701], count: 519 },
          { type: "Point", coordinates: [116.305183, 40.051971], count: 319 },
          { type: "Point", coordinates: [116.316795, 39.903668], count: 139 },
          { type: "Point", coordinates: [116.230893, 40.206207], count: 129 },
          { type: "Point", coordinates: [116.229256, 39.925149], count: 190 },
          { type: "Point", coordinates: [116.296054, 39.933653], count: 189 },
          { type: "Point", coordinates: [116.292784, 39.957575], count: 1 },
          { type: "Point", coordinates: [116.263834, 39.987036], count: 119 },
          { type: "Point", coordinates: [116.31628, 40.04121], count: 200 },
          { type: "Point", coordinates: [116.31076, 40.00001], count: 300 },
        ],
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.map = new Ymap({
        el:'Ymap',
        option:{
          key:'b9d4b98c977aee7408ab9c89def3aad7',
          center:[116.305435, 39.965488],
          zoom:10,
          minZoom: 4,
          maxZoom: 17,
        }
      })
      this.map.on("click", (event) => {
        console.log(event.coordinate);
        // this.maker = this.map.addMaker({
        //   coordinate: event.coordinate,
        //   label: "当前位置",
        // });
      });
      //鼠标滚轮事件
      this.map.on("moveend", (e) => {
        // console.log(e);
        // this.map.getView().getZoom()
        // console.log(this.map.getView().getZoom())
      });
    })
  },
  methods:{
    handleMapEvent(fnkey){
      switch(fnkey){
        case 1:
          this.initMap()
          break;
        case 2:
          this.setMapZoom()
          break;
        case 3:
          this.setMapZoom()
          break;
        case 4:
          this.mapMoveTo()
          break;
        case 5:
          this.mapAddMaker()
          break;
        case 6:
          this.mapAddLine()
          break;
        case 7:
          this.mapAddCircle()
          break;
        case 8:
          this.mapAddSector()
          break;
        case 9:
          this.mapAddPolygon()
          break;
        case 10:
          this.mapClear()
          break;
        case 11:
          this.mapMoveLayer()
          break;
        case 20:
          this.mapGetLayers()
          break;
        case 12:
          this.mapBrawLine()
          break;
        case 13:
          this.mapBrawCircle()
          break;
        case 14:
          this.mapBrawRect()
          break;
        case 15:
          this.mapBrawPolygon()
          break;
        case 16:
          this.mapMakerInfo()
          break; 
         case 17:
          this.mapAddCluster()
          break;
        case 18:
          this.mapHotState()
          break;
          
      }
    },
    //初始化地图
    initMap(){
      document.getElementById('Ymap').innerHTML=''
      this.map = new Ymap({
        el:'Ymap',
        option:{
          key:'b9d4b98c977aee7408ab9c89def3aad7',
          center:[116.305435, 39.965488],
          zoom:12,
          minZoom: 4,
          maxZoom: 17,
        }
      })
      this.map.on("click", (event) => {
        console.log(event.coordinate);
        // this.maker = this.map.addMaker({
        //   coordinate: event.coordinate,
        //   label: "当前位置",
        // });
      });
      //鼠标滚轮事件
      this.map.on("moveend", (e) => {
        // console.log(e);
        // this.map.getView().getZoom()
        // console.log(this.map.getView().getZoom())
      });
    },
    //设置地图缩放级别
    setMapZoom(){
      let view = this.map.getView();
      view.setZoom(6)
    },
    //设置地图中心
    setMapZoom(){
      let view = this.map.getView();
      view.setCenter([110.09465925962867, 20.891809117242243])
    },
    //地图移动
    mapMoveTo(){
      this.map.flyTo({
        location:[116.5314787514633, 39.88583712109375],
        duration:1000,
        zoom:11
      })
    },
    //添加maker
    mapAddMaker(){
      this.map.addMaker({
        name:'newmaker',
        location:[116.305435, 39.965488],
        icon:require('@/assets/img/icon.png'),
        label:'点位'
      })
    },
    //添加线
    mapAddLine(){
      this.map.addLine({
        className: "map-line",
        points: [
          [116.02171310969949, 39.80783420817006],
          [116.33702069335938, 39.85507536881614],
          [116.5479582436508, 39.941867377767444],
          [116.73252850585938, 40.014377168538154],
        ],
        lineColor: "red",
        lineWidth: 2,
        lineDash:[0] //虚线
      });
    },
    //添加圆
    mapAddCircle(){
      this.map.addCircle({
        location: [116.395435, 39.965488],
        radius: 8000,
        borderColor: "red",
      });
    },
    //添加扇形
    mapAddSector(){
      this.map.addSector({
        location: [116.395435, 39.965488],
        radius: 8000,
        borderColor: "red",
        startDeg:0,
        moveDeg:45,
        bgColor:'rgba(255,255,255,0.2)'
      })
    },
    //添加多边形
    mapAddPolygon(){
      this.map.addPolygon({
        className: "map-block",
        points: [
          [116.0791853051758, 39.981109185302735],
          [116.13926678710939, 39.91313125907454],
          [116.2388303857422, 39.982139143087075],
          [116.12175732666017, 40.045997185791016],
          [116.07231885009767, 40.000335259521485],
          [116.08021527343752, 39.97973589428711],
        ],
        lineColor: "red",
        lineWidth: 2,
        bgColor: "rgba(210,56,180,0.4)",
      });
    },
    //清空覆盖物
    mapClear(){
      this.map.clearMap()
    },
    //移除覆盖物
    mapMoveLayer(){
      let layerArr = this.map.getLayers();
      if(layerArr.length>0){
        this.map.remove(layerArr[0])
      }
    },
    //获取所有覆盖物
    mapGetLayers(){
      console.log(this.map.getLayers())
    },
    //画线
    mapBrawLine(){
      let linedraw = this.map.drawLine({
        lineColor:'yellow',
        lineWidth:4,
      })
      //随机画线结束，获取坐标点
      linedraw.on('drawend',(event)=>{
        var feature=event.feature;
        var geometry=feature.getGeometry();
        var coordinate=geometry.getCoordinates();
        console.log(coordinate);
        this.map.removeInteraction(linedraw);
      })
    },
    //画圆
    mapBrawCircle(){
      let circleDraw = this.map.drawCircle({
        lineColor:'yellow',
        lineWidth:4,
        bgColor:'rgba(255,255,255,0.4)'
      })
      //随机画线结束，获取坐标点
      circleDraw.on('drawend',(event)=>{
        var feature=event.feature;
        var geometry=feature.getGeometry();
        console.log(geometry)
        this.map.removeInteraction(circleDraw);
      })
    },
    //画矩形
    mapBrawRect(){
      let rectDraw = this.map.drawRect({
        lineColor:'yellow',
        lineWidth:4,
        bgColor:'rgba(255,255,255,0.4)'
      })
      //随机画线结束，获取坐标点
      rectDraw.on('drawend',(event)=>{
        var feature=event.feature;
        var geometry=feature.getGeometry();
        console.log(geometry)
        var coordinate=geometry.getCoordinates();
        console.log(coordinate);
        this.map.removeInteraction(rectDraw);
      })
    },
    //画多形
    mapBrawPolygon(){
      let polygonDraw = this.map.drawPolygon({
        lineColor:'yellow',
        lineWidth:4,
        backgroundColor:'rgba(210,56,180,0.4)'
      })
       //随机画线结束，获取坐标点
      polygonDraw.on('drawend',(event)=>{
        var feature=event.feature;
        var geometry=feature.getGeometry();
        var coordinate=geometry.getCoordinates();
        console.log(coordinate);
        this.map.removeInteraction(polygonDraw);
      })
    },
    //信息窗口
    mapMakerInfo(){
      this.codeActive='makerOverlay'
      this.overLayer = this.map.addMakerOverlay({
        html: this.$refs.eventInfo,
        coordinate:  [116.305435, 39.965488],
      });
    },
    closeOverlay() {
      if (this.overLayer) {
        this.map.removeOverlay(this.overLayer);
      }
    },
    //点聚合
    mapAddCluster(){
      axios.get('https://console.tianditu.gov.cn/data/center-data/publish/1ce7f182791c4e889a6d73e91d0e32bf').then(res=>{
        console.log(res)
        let result = res.data.data.results;
        let option = {
          points: [],
          icon:require('@/assets/img/icon.png'),
          bgImg:require('@/assets/img/bgImg.png'),
          distance: 40,
        };
        result=result.slice(0,2000)
        result.forEach((point) => {
          option.points.push(point.geojson.geometry.coordinates[0]);
        });
        // console.log(option)
        this.map.addCluster(option);
      })
      // axios
      //   .get(
      //     "http://10.111.15.8:8085/api/getAPIService/5228019885c94531b9ebff56115d109f?token=2c91808876751a390176892a38ff0001&layerName=ZHJY_GIS%3Ahd_bj_0106"
      //   )
      //   .then((res) => {
      //     let result = res.data.features;
      //     let option = {
      //       points: [],
      //       distance: 10,
      //     };
      //     result.forEach((point) => {
      //       option.points.push(point.geometry.coordinates);
      //     });
      //     this.map.addCluster(option);
      // });
    },
    //热力图
    mapHotState(){
      this.map.addHeatMap(this.heatData)
    }
  }
}
</script>
<style lang="scss" scoped>
.yun-page{
  width:100%;
  height:100%;
  position: relative;
  .yun-map{
    width:100%;
    height:100%;
  }
  .yun-menu{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    width:200px;
    background:#00000070;
    padding:5px 0;
    .yun-menu-item{
      width:100%;
      height:36px;
      font-size:14px;
      color:#fff;
      text-align: center;
      line-height: 36px;
      border-bottom:1px solid #efefef6b;
      background: #29e9f361;
      cursor: pointer;
    }
  }
  .event {
    width: 300px;
    display: none;
    border: 1px solid skyblue;
    .event-title {
      padding: 20px;
      font-size: 16px;
      background: skyblue;
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
    .event-content {
      padding: 20px;
      font-size: 14px;
      color: #333;
      background: rgba(238, 245, 248, 0.753);
    }
  }
}
</style>
